<template>
  <div class="template_main">
    <div class="title_box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="公共模板" name="1"></el-tab-pane>
        <el-tab-pane label="个人模板" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="template_main_box">
      <div v-if="tableList.length">
        <div v-for="(item, index) in tableList" :key="item.id">
          <div
            class="template_check_one"
            @click="chooseOne(item, index)"
            :class="item.choosed ? 'choose_select' : 'choose_no'">
            <el-checkbox v-model="item.choosed" @change="chooseOne(item, index)" class="tem_left_check"></el-checkbox>
            <p class="check_one_p1">
              {{ item.workTag }}
            </p>
            <p class="check_one_p2">{{ item.workContent }}</p>
            <p class="check_one_p3">{{ item.workClassifyName }}</p>
            <p v-if="activeName == '2'" class="check_one_p4" @click.stop="delTemplate(item)">
              <i class="el-icon-close"></i>
            </p>
          </div>
        </div>
        <pagination
          slot="pagination"
          :page-size.sync="tablePage.pageSize"
          :total="tablePage.totalResult"
          :current-page.sync="tablePage.currentPage"
          :pageSizes="[10, 20]"
          layout="slot,prev, pager, next, sizes, jumper"
          @change="onPageChange"></pagination>
        <div class="btn_save">
          <el-button @click="cancelTemplate" size="small">取 消</el-button>
          <el-button size="small" type="primary" @click="setData()">确认添加</el-button>
        </div>
      </div>
      <Empty v-if="tableList.length == 0 && activeName == '1'"></Empty>
      <div v-if="tableList.length == 0 && activeName == '2'">
        <div class="no-data">暂无数据，在纪实填写时您可将自己的日常重复性工作收藏至个人模板方便后续直接添加。</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryNoteTemplateList, delNoteTemplateInfo } from '@apis/board.js'
import pagination from '@com/pagination'
export default {
  components: { pagination },
  data() {
    return {
      activeName: '1',
      tableList: [],
      idList: [],
      chooseTable: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
    }
  },
  created() {
    this.getPage()
  },
  mounted() {},
  methods: {
    handleClick() {
      this.tablePage.currentPage = 1
      this.tablePage.pageSize = 10
      this.getPage()
    },
    chooseOne(item, index) {
      if (this.idList.length > 0) {
        let choosed = false
        for (const i in this.idList) {
          if (this.idList[i] === item.id) {
            choosed = true
            this.idList.splice(i, 1)
            this.chooseTable.splice(i, 1)
            this.$set(this.tableList[index], 'choosed', false)
            return
          }
        }
        if (!choosed) {
          this.$set(this.tableList[index], 'choosed', true)
          this.idList.push(item.id)
          this.chooseTable.push(item)
        }
      } else {
        this.idList.push(item.id)
        this.chooseTable.push(item)
        this.$set(this.tableList[index], 'choosed', true)
      }
    },

    cancelTemplate() {
      this.$emit('cancelTemplate', true)
    },
    // 确认
    setData() {
      this.$emit('templateBtn', this.chooseTable)
    },
    //
    getPage() {
      queryNoteTemplateList({
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        belongId: this.activeName === '1' ? '' : localStorage.pskh_userId,
        keywords: '',
        templateType: this.activeName,
      }).then(res => {
        this.tableList = res.data.records || []
        this.tablePage.totalResult = res.data.total
        if (this.tableList.length && this.idList.length) {
          for (const i in this.tableList) {
            for (const j in this.idList) {
              if (this.idList[j] === this.tableList[i].id) {
                this.$set(this.tableList[i], 'choosed', true)
              }
            }
          }
        }
      })
    },
    onPageChange(e) {
      this.tablePage.currentPage = e.currentPage
      this.getPage()
    },

    // 删除
    delTemplate(row) {
      this.$confirm('确定删除该模板吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delNoteTemplateInfo({
            id: row.id,
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('删除成功')
              this.getPage()
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.template_main {
  .title_box {
    height: 56px;
    /deep/.el-tabs__header {
      margin: 0;
      padding: 0 10px;

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        line-height: 52px;
      }
    }
    /deep/.el-tabs__nav {
      display: flex;
      .el-tabs__active-bar {
        background-color: #409eff;
      }
      .el-tabs__item.is-active {
        color: #409eff;
      }
      .el-tabs__item {
        height: 52px;
        line-height: 52px;
        padding: 0 10px;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
  .template_main_box {
    margin: 10px;
    .template_check_one {
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-bottom: 10px;
      cursor: pointer;
      line-height: 30px;
      padding: 0 10px;
      border: 1px solid transparent;
      .tem_left_check {
        margin-right: 10px;
        margin-top: -2px;
      }
      .check_one_p1 {
        width: 16%;
      }
      .check_one_p2 {
        width: 66%;
      }
      .check_one_p3 {
        width: 15%;
        text-align: right;
      }
      .check_one_p4 {
        width: 3%;
        text-align: right;
        color: #ff0000;
      }
    }
    .choose_select {
      color: #004db6;
      border-color: #004db6;
    }
    .btn_save {
      text-align: right;
    }
    .no-data {
      height: 150px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #ccc;
    }
  }
}
</style>
